<script setup>
    // 使用组合式（setup)，没用选项式
    import { ref, toRefs } from "vue";
    const props = defineProps({
        modelValue: Boolean,
        title: String,
    });
    //此处必须用toRefs，否则将失去响应式
    const { title } = toRefs(props);

    // 定义自定义事件，为了更新父组件的modelValue
    const emits = defineEmits(['update:modelValue']);
    const checked = ref(props.modelValue);
    // 当checkbox状态变化时，触发更新事件通知父组件
    function onChange(event) {
        checked.value = event.target.checked;
        emits('update:modelValue', checked.value);
    }

    const itemText = ref('子组件数据');


</script>

<template>
    <!-- 模板组件必须在一个节点内，否则传递属性无法自动继承 -->
    <label>
        <input type="checkbox" :value="checked.value" @change="onChange" />
        <slot name="aaa" :text="itemText">默认</slot>
        <i>{{title}}</i>
    </label>
</template>